<template>
  <div class="imgpointer"
       :style="imgSize"
       v-if="imgUrl">
    <img :src="imgUrl"
         :style="imgSize">
    <img class="pointer"
         src="@image/red_pointer.png"
         v-if="pointer&&num== -1" />
    <div class="text"
         v-if="num > 0">{{num}}</div>
  </div>
</template>
<style lang="stylus" scoped>
.imgpointer {
  position: relative;

  .pointer {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 0;
    top: 0;
  }

  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    right: -8px;
    top: -8px;
    color: white;
    font-size: 8px;
    background: red;
  }
}
</style>
<script>
export default {
  name: 'img-pointer',
  /*
    img:图片名称不含后缀以及地址
    比如：../../assets/images/mk_icon_msg.png  ->  img:mk_icon_msg
    size:图片大小
    pointer:是否显示红点点，默认为显示
  */
  props: {
    img: String,
    size: {
      default: 40
    },
    pointer: {
      default: true
    },
    num: {
      default: -1
    }
  },
  computed: {
    imgUrl () {
      return require(`@image/` + this.img + `.png`)
    },
    imgSize () {
      return {
        width: this.size / 100 + 'rem',
        height: this.size / 100 + 'rem',
        position: 'absolute'
      }
    }
  }
}
</script>
